<template>
  <div class="activity-detail">
    <h2 class="title">添加店铺活动</h2>
    <div class="box">
      <div class="wrapper">
        <el-form label-position="right" label-width="140px">
          <el-form-item class="name" prop="name" label="活动名称：">
            <span>{{ info.name }}</span>
          </el-form-item>
          <el-form-item label="活动类型：">
            <span>{{ info.type === '02200001' ? '折扣' : info.type === '02200002' ? '满减' : '' }}</span>
            <el-form-item v-if="info.type === '02200001'" class="off" label="折扣力度：">
              <span>{{ info.disCount }} 折</span>
            </el-form-item>
          </el-form-item>
          <el-form-item label="活动时间：">
            <span>{{ new Date(info.beginTime) | getDate }} {{ new Date(info.beginTime) | getTime }} 至 {{ new Date(info.finishTime) | getDate }} {{ new Date(info.finishTime) | getTime }}</span>
          </el-form-item>
          <el-form-item class="upload-box" label="活动图片(电脑端)：">
            <img :src="qnPath(info.imageWeb)" style="width: 400px; height: 90px">
            <!-- <el-image
              style="width: 400px; height: 90px"
              :src="qnPath(info.imageWeb)"
              fit="fill"
            /> -->
          </el-form-item>
          <el-form-item class="upload-box" label="活动图片(手机端)：">
            <img :src="qnPath(info.imageApp)" style="width: 300px; height: 100px">
            <!-- <el-image
              style="width: 300px; height: 100px"
              :src="qnPath(info.imageApp)"
              fit="fill"
            /> -->
          </el-form-item>
          <!-- 商品 -->
          <el-form-item class="pdts" label="活动商品：">
            <div class="pdts-wrapper">
              <table v-if="info.detail.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>原价</th>
                    <th>活动价</th>
                    <th>库存</th>
                    <th>销量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(pdt, index) in info.detail" :key="index">
                    <td>
                      <div>
                        <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image.split(',')[0])" fit="fit" /></p>
                        <div class="info">
                          <p class="name">{{ pdt.name }}</p>
                          <p class="id">ID：{{ pdt.mdseId }}</p>
                        </div>
                      </div>
                    </td>
                    <td>{{ pdt.typeValue }}</td>
                    <td>{{ pdt.unitPrice | fixedPrice }}</td>
                    <td class="price-red">{{ pdt.unitPrice * Number(info.disCount) / 10 | fixedPrice }}</td>
                    <td>{{ pdt.amount }}</td>
                    <td>{{ pdt.sales }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="goBack">返 回</el-button>
            <el-button type="primary" @click="edit">编 辑</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getOneById } from '@/api/activity';
export default {
  name: 'ShopActivityDetail',
  data() {
    return {
      id: '',
      info: {
        detail: []
      }
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getOneById(this.id);
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'AdShop', query: { reload: false }});
    },
    edit() {
      this.$router.push({ name: 'ShopActivityEdit', params: { id: this.id }});
    },
    getOneById(id) {
      new Promise((resolve, reject) => {
        getOneById({ id }).then(res => {
          this.info = res.data;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.activity-detail {
	font-size: $fontSizeBase;
	background-color: #fff;
	p{
		margin: 0
  }
  .off{
    display: inline-block;
    /deep/ .el-input{
      width: 70%;
    }
  }
}
@import '@/styles/shop-activity-add.scss';
.pdts-selected-table {
 td{
    &:first-child{
      padding-right: 15px;
    }
    &.price-red{
      color: $errorColor;
    }
  }
}
</style>
